<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		 <title>来源分析</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
		<%@ include file="/WEB-INF/jspf/statics.jspf" %>
	</head>
	<body style="width:100%;">
		<%@include file="/WEB-INF/pages/common/header.jsp" %>
		<%@include file="/WEB-INF/pages/common/menu.jsp" %>
		<div id="rightqqqq" style="border-left-style:groove ;float:left;width:88%;height:10px;margin-left:4px;min-height:80%;overflow-y:auto; overflow-x:hidden; ">
			<div style="margin:10px 0px;height:auto;">
				<div id="navContainer" class="navC mb10">  
			        <ul>  
			            <li ><a name="now" onclick="chinaMap()" hidefocus="true">客源地分析</a></li>  
			            <li class="current"><a name="today" onclick="chartPie('seven')" hidefocus="true">省源地分析</a></li> 
			            <li><a name="yestoday" onclick="stageAnalyze();" hidefocus="true">阶段分析</a></li>  
			        </ul>  
  				</div> 
			</div>
			<!-- 查询条件区 -->
			<div id="recendSearchCondition" style="height: 40px; line-height:40px; background-color:#ddeee5; margin-bottom:5px;width:99%;">
				<div style="float:left;">
					<input type="button" class="btn5" value="最近7天" id="nearSeven" onclick="chartPie('seven');" style="width:120px;" />
					<input type="button" class="btn5" value="最近30天" id="nearThiry" onclick="chartPie('thirty');" style="width:120px;" />
				</div>
				<form id="searchForm" onsubmit="fnValidate('#startOrderTime','#endOrderTime');$('#dataTable').refreshData();return false;">
						起始时间：
						<input type="text" name="startTime" id="startTime" />
						结束时间：
						<input type="text" name="endTime" id="endTime"/>
						<input type="button" value="统计" onclick="chartPie('custom');" class="btn5" style="width:80px;" >
					</form>
			</div>
			<div style=" height: auto;" class="containerStyle">
				<div style="height:30px;width:100%; background-color:#ddeee5;"></div>
				<div id="container"	style="min-width: 250px; height: 400px; margin: 0 auto"></div>
			</div>
			<div class="testaa" style="width:99%;height:10px;"></div>
				<div style="float: left;  height: auto;" class="containerStyle">
			<!--div-958 start-->
			<div class="div-958" style="margin-top: 0px; width: 100%">
				<div style="width: 100%;" class="container clearfix w942">
					<div style="width: 100%;" class="cont bl0">
						<!-- content start -->
						<div class="content">
							<!-- orderResults start -->
							<div class="orderResults" ng-show="orderForm.searchFlag">
								<!-- dataTable_wrapper start -->
								<div id="dataTable_wrapper" class="dataTables_wrapper" role="grid">
									<div class="top">
										<div class="dataTables_info" id="dataTable_info">
											游客明细
										</div>
									</div>
									<table id="dataTable" class="dataTable" name="datatable"
										aria-describedby="dataTable_info">
										<thead>
											<tr role="row">
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													省份
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													游客人数
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													团队
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													比重
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													散客
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													比重
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													网络预约
												</th>
												<th class="sorting_disabled" role="columnheader"
													rowspan="1" colspan="1">
													比重
												</th>
											</tr>
										</thead>
										<tbody role="alert" aria-live="polite" aria-relevant="all">
										</tbody>
									</table>
								</div>
								<!-- dataTable_wrapper end -->
							</div>
							<!-- orderResults end -->
						</div>
						<!-- content end -->
					</div>
				</div>
				</div>
			</div>
			<!--div-958 end-->
			<div class="testaa" style="width:99%;height:10px;"></div>
		</div>
	</body>
</html>
<script type="text/javascript" src="<%=basePath%>js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-1.10.3.datepicker_zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">

$().ready(function(){
	$('#navigation').accordion({
		header: '.head',
		navigation1: true, 
		event: 'click',
		fillSpace: true,
		active:1,
		animated: 'bounceslide'
	});
	$("a[class='actived']").removeAttr("class");
	$("#source").attr("class", "actived");
	$("#currentPosition").text("当前位置：统计报表> 来源分析  > 省源地分析");
});

$(function(){
	chartPie('seven');
	$("#startTime").datepicker().val();
	$("#endTime").datepicker().val();
})

function chinaMap(){
	window.location.href="${ctx}/visitor/statistics/chart/source_map";
}

function stageAnalyze(){
	window.location.href="${ctx}/visitor/statistics/chart/source_stage";
}

function chartPie(value){
	handleTime(value);
    url="${ctx}/visitor/statistics/chart/eve_provice_visitor_pie";
    var data=[];
	 $.ajax({
        type:'post',
        url:url,
        data:$("#searchForm").serializeArray(),
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        async : false,//给全局变量赋值 
        success: function(result) {
        	var json1 = eval("("+result+")");
            $(json1).each(function(i,n){
                id = n['staProviceDisplay'];
                value = n['staCount'];
                data.push({name:id,y:value});
            }); 
        },
        error:function(e){
        } 
    });

	var chart = new Highcharts.Chart({
		chart: {
		 	renderTo:'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            margin: [0, 150, 160, 70],
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            name: "Brands",
            data:data
        }]
	});
	searchVisitorInfo();
}

function searchVisitorInfo() {
	$(".toggle-content").hover(function () {
           $(this).find(".dropdown-menu").show();
        }, function () {
           $(this).find(".dropdown-menu").hide();
    });
    $("#dataTable").dataTables({
        "sAjaxSource": "${ctx}/visitor/statistics/search/eve_provice_visitor_inf",
        "fnServerData": function (sSource, aoData, fnCallback) {
         	var postData = aoData.concat($("#searchForm").serializeArray());
            $.post(sSource,postData,function (json) {
                fnCallback(json.data);
            }, "json");
        },
        "aoColumns": [
        	{
                "sName": "sta_provice_display", "mDataProp": "staProviceDisplay", "bSortable": false
            },
        	{
                "sName": "sta_count", "mDataProp": "staCount", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "staGroupCount", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "groupPrecent", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "scatteredCount", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "scatteredPrecent", "bSortable": false
            },
            {
                "sName": "sta_internet_trading_count", "mDataProp": "staInternetTradingCount", "bSortable": false
            },
            {
                "sName": "sta_internet_trading_count", "mDataProp": "meshPrecent", "bSortable": false
            }
        ]
    });
     $("#dataTable").columnManager({"listTargetID": "column-edit-01"});
     $(".bottom").remove();
}

</script>
 

